<template>
    <div class="card-list">

        <!--    添加企业弹窗-->
        <a-modal v-model="addCardShow" title="新增专家组信息" @ok="handleOk">
            <a-form>
                <a-form-item
                        label="专家组名称"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-input placeholder="填写参选专家组正式名称" v-model="title"/>
                </a-form-item>
                <a-form-item
                        label="专家组介绍"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-textarea rows="4" placeholder="简要介绍专家组信息" v-model="synopsis"/>
                </a-form-item>
                <a-form-item
                        label="贫身奖项"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-textarea rows="4" placeholder="简要介绍专家组信息" v-model="review_award_id"/>
                    <!--                    <a-select default-value="lucy" style="width: 120px;" @change="handleChange">-->
                    <!--                        <a-select-option value="jack">-->
                    <!--                            Jack-->
                    <!--                        </a-select-option>-->
                    <!--                        <a-select-option value="lucy">-->
                    <!--                            Lucy-->
                    <!--                        </a-select-option>-->
                    <!--                        <a-select-option value="disabled" disabled>-->
                    <!--                            Disabled-->
                    <!--                        </a-select-option>-->
                    <!--                        <a-select-option value="Yiminghe">-->
                    <!--                            yiminghe-->
                    <!--                        </a-select-option>-->
                    <!--                    </a-select>-->
                </a-form-item>
            </a-form>
        </a-modal>
        <!--    修改企业信息-->
        <a-modal v-model="changeCardShow" title="修改专家组信息" @ok="submitChange">
            <a-form>
                <a-form-item
                        label="专家组名称"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-input placeholder="填写参选专家组正式名称" v-model="title"/>
                </a-form-item>
                <a-form-item
                        label="专家组介绍"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-textarea rows="4" placeholder="专家组信息" v-model="synopsis"/>
                </a-form-item>
                <a-form-item
                        label="专家组介绍"
                        :labelCol="{span: 7}"
                        :wrapperCol="{span: 10}"
                >
                    <a-textarea rows="4" placeholder="奖项信息" v-model="review_award_id"/>
                </a-form-item>

            </a-form>
        </a-modal>

        <a-list
                :grid="{gutter: 24, lg: 3, md: 2, sm: 1, xs: 1}"
                :dataSource="dataSource"
        >
            <a-list-item slot="renderItem" slot-scope="item">
                <template v-if="item.add">
                    <a-button class="new-btn" type="dashed" @click="showAddModal">
                        <a-icon type="plus"/>
                        新增专家组
                    </a-button>
                </template>
                <template v-else>
                    <a-card :hoverable="true">
                        <a-card-meta>
                            <div style="margin-bottom: 3px" slot="title">{{item.title}}</div>
                            <a-avatar class="card-avatar" slot="avatar" :src="item.avatar" size="large"/>
                            <div class="meta-content" slot="description">{{item.content}}</div>
                        </a-card-meta>
                        <a slot="actions"
                           @click="showChangeModal(item.title, item.content, item.id, item.review_award_id)">修改</a>
                        <a slot="actions" @click="deletePanels(item.id)">删除专业组</a>
                        <a slot="actions" @click="goToExpertEvaluation(item)">专家组列表</a>
                    </a-card>
                </template>
            </a-list-item>
        </a-list>
    </div>
</template>

<script>
    import Axios from 'axios'

    export default {
        name: 'AddEnterpriseMsg',
        data() {
            return {
                mockData: [],
                targetKeys: [],
                url: this.$store.state.apiUrl + ':' + this.$store.state.apiPort,
                desc: '参选企业单位一览，可以添加或修改企业信息，也可以添加参选单位的负责人信息',
                linkList: [
                    {icon: 'rocket', href: '/#/', title: '快速开始'},
                    {icon: 'info-circle-o', href: '/#/', title: '产品简介'},
                    {icon: 'file-text', href: '/#/', title: '产品文档'}
                ],
                extraImage: 'https://gw.alipayobjects.com/zos/rmsportal/RzwpdLnhmvDJToTdfDPe.png',
                // 添加企业弹窗是否可见
                addCardShow: false,
                // 修改卡片弹窗是否可见
                changeCardShow: false,
                // 抽屉是否可见
                visible: false,
                // 企业名称
                title: "",
                // 企业简介
                synopsis: "",
                //ID?
                review_award_id: "",
                changeId: 0,
                dataSource: [],
            }
        },
        mounted() {
            this.dataSource.push({
                add: true
            })
            Axios.get(this.url + "/pxManagerSystem/getAllReviewGroupInfos")
                .then((res) => {
                        const Sdata = res.data.data.reviewGroupInfoList;
                        //console.log(Sdata)
                        for (let i = 0; i < Sdata.length; i++) {
                            this.dataSource.push({
                                id: Sdata[i].review_id,
                                title: Sdata[i].review_name,
                                avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
                                content: Sdata[i].review_tip,
                                review_award_id: Sdata[i].review_award_id,
                            })
                        }
                        //console.log(Sdata)
                    }
                )
        },
        methods: {
            handleChange(value) {
                console.log(`selected ${value}`);
            },
            showAddModal() {
                this.addCardShow = true
            },
            handleOk(e) {
                console.log(e)
                // 添加， 未连接后端 添加
                Axios.post(this.url + "/pxManagerSystem/insertReviewGroups", {
                    review_name: this.title,
                    review_tip: this.synopsis,
                    review_award_id: this.review_award_id,
                }).then(
                    () => {
                        this.dataSource.push({
                            id: 0,
                            title: this.title,
                            avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
                            content: this.synopsis,
                            review_award_id: this.review_award_id,
                        })
                    }
                )
                this.title = this.synopsis = ""
                this.addCardShow = false
            },
            showChangeModal(title, content, id, review_award_id) {
                this.title = title
                this.synopsis = content
                this.review_award_id = review_award_id
                this.changeId = id
                this.changeCardShow = true
            },
            //修改
            submitChange() {
                Axios.put(this.url + "/pxManagerSystem/updateReviewGroupByReviewGroupId", {
                    review_id: this.changeId,
                    review_name: this.title,
                    review_tip: this.synopsis,
                    review_award_id: this.review_award_id
                }).then(
                    () => {
                         this.dataSource.forEach(
                            (item) => {
                                if (item.id == this.changeId) {
                                    item.title = this.title;
                                    item.content = this.synopsis;
                                    item.review_award_id = this.review_award_id;
                                }
                            }
                        )
                        this.$message.success("修改成功")
                    }
                )
                this.title = this.synopsis = ""
                this.changeCardShow = false
            },
            getMock(item) {
                const targetKeys = [];
                const mockData = [];
                console.log(item.id)//评审组ID
                //获取所有专家作为数据源
                Axios.get(this.url + "/pxManagerSystem/getSpecialUserList").then(
                    (res) => {
                        const dataSP = res.data.data.speciallist;
                       // console.log(dataSP)
                        for (let i = 0; i < dataSP.length; i++) {
                            const data = {
                                key: dataSP[i].specialist_id,
                                name: dataSP[i].specialist_realname,
                                title: dataSP[i].professional_title,
                            };
                            mockData.push(data);//数据源
                        }
                        this.mockData = mockData;
                    }
                )
                //获取此专家组下的专家ID
                Axios.post(this.url+"/pxManagerSystem/getAllSpecialistIdByReviewId",{
                    review_id:item.id
                }).then(
                    (res)=>{
                        const SPdata = res.data.data.specialistIdlist;
                        //console.log(res.data.data)
                        SPdata.forEach(
                            (data)=>{
                                targetKeys.push(data)
                            }
                        )
                        this.targetKeys = targetKeys;
                        console.log(targetKeys)
                        this.$router.push({
                            name: '评审组设置',
                            params: {
                                item: item,
                                mockData: this.mockData,
                                targetKeys: this.targetKeys,
                            }
                        })
                    }
                )

            },
            //相专家组传值
            goToExpertEvaluation(item) {
                this.getMock(item);
                // console.log(item)
                console.log(this.mockData)
                console.log(this.targetKeys)

            },
            deletePanels(id) {
                Axios.delete(this.url + "/pxManagerSystem/deleteReviewGroupInfoByReviewGroupInfoId", {
                    data: {
                        review_id: id
                    }
                }).then(
                    this.dataSource = this.dataSource.filter(
                        (item) => {
                            return item.id !== id;
                        }
                    )
                )

            },
            // 传值例子
            goModifyDeclarant(id) {
                this.$router.push({
                    name: '修改申报人信息',
                    params: {
                        id: id,
                        item: {
                            enterprise: "测试企业",
                            userName: "testname",
                            password: "password",
                            name: "测试负责人姓名",
                            phone: 123123,
                        }
                    }
                })
            }

        },
    }
</script>

<style lang="less" scoped>
    .card-avatar {
        width: 48px;
        height: 48px;
        border-radius: 48px;
    }

    .new-btn {
        border-radius: 2px;
        width: 100%;
        height: 187px;
    }

    .meta-content {
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        height: 64px;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
    }

</style>
